---
name: useAPI
route: /useAPI
menu: 'SideEffect'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3CodeTsx from '!raw-loader!./demo/demo3.tsx';
import Demo3CodeJsx from '!raw-loader!./demo/demo3.jsx';

import Demo4 from './demo/demo4';
import Demo4CodeTsx from '!raw-loader!./demo/demo4.tsx';
import Demo4CodeJsx from '!raw-loader!./demo/demo4.jsx';


# useAPI

一个内置 `umi-request`，帮你管理网络请求的 Hook。
支持立即执行，手动触发执行，轮询。
> 这个 Hook 主要展示了如何封装 useAsync 能力，可能您不需要使用 umi-request，
但是可以参照 [useAPI 的方式](https://github.com/umijs/hooks/blob/master/src/useAPI/index.ts)封装 useAsync。在这里可以添加请求头信息，根据接口格式做统一报错处理，数据转换等等。
当然，如果 useAPI 可以满足您的需求，也可以直接在您的业务中使用。

## 代码演示

### 默认用法

<JackBox tsCode={Demo1CodeTsx} jsCode={Demo1CodeJsx} demoName='默认用法' description='组件加载时立即执行'>
  <Demo1 />
</JackBox>

### 手动触发执行

<JackBox tsCode={Demo2CodeTsx} jsCode={Demo2CodeJsx} demoName='手动触发执行' description='手动发送请求，只有当 run 方法被调用时请求才会发出'>
  <Demo2 />
</JackBox>

### 轮询

<JackBox tsCode={Demo3CodeTsx} jsCode={Demo3CodeJsx} demoName='轮询' description='每三秒进行一次请求，将在上次请求返回后开始计时'>
  <Demo3 />
</JackBox>

### 修改 request 方法

<JackBox tsCode={Demo4CodeTsx} jsCode={Demo4CodeJsx} demoName='修改 request 方法' description='使用自定义的 request 方法'>
  <Demo4 />
</JackBox>

## API

接口参考 [useAsync](./useAsync)